<!-- 新增或编辑使用状态组件 -->
<template>
  <a-modal
    width="50%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title>
      {{ currForm.id ? '编辑使用状态' : '新增使用状态' }}
    </template>
    <div>
      <a-form :model="currForm" direction="vertical" auto-label-width>
        <a-form-item field="demandInfo" label="设备使用状态：">
          <a-input
            placeholder="请输入使用状态"
            allow-clear
            v-model="currForm.name"
          />
        </a-form-item>
        <a-form-item field="decision" label="备注：">
          <a-textarea
            placeholder="请输入"
            v-model="currForm.remark"
            allow-clear
            show-word-limit
            :auto-size="{
              minRows: 5,
            }"
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { reactive, computed, ref, watchEffect } from 'vue';
  // import { IClientAddFollowRecord } from '@/types/order';

  const props = withDefaults(
    defineProps<{
      visible: boolean; // 是否显示对话框
      form: any; // 传进来的数据
    }>(),
    {
      visible: false,
    }
  );

  const emit = defineEmits(['update:visible', 'addFaultTypeEmit']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  let currForm = ref<any>({
    name: '',
    remark: '',
  });

  watchEffect(() => {
    if (modalVisible.value) currForm.value = cloneDeep(props.form);
  });

  // 保存
  const handleOk = async () => {
    modalVisible.value = false;
    emit('addFaultTypeEmit', currForm.value);
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less"></style>
